.wx-form {
    margin: 0 12px;

    > .wx-item {
        margin: 0 -12px;
        font-size: 14px;

        > .wx-name {
            padding: 14px 12px 8px;
            line-height: 14px;
            color: $group-title-color;
            display: block;
        }

        > .wx-content {
            border: none;
            box-sizing: border-box;
            display: block;
            width: 100%;
            min-height: 5em;
            outline: none;
            resize: none;
            @include physical-border-top($color-line);
            @include physical-border-bottom($color-line);
            padding: 8px 8px 8px 12px;
            background: $color-white;
            color: $color-main;
            line-height: 18px;
            overflow: hidden;
            @include input-placeholder {
                color: #a9a9a9;
            }
            &[contentEditable]:empty:before {
                content: attr(placeholder);
                color: #a9a9a9;
            }

            > .wx-icon {
                width: 64px;
                height: 64px;
                display: block;
                float: left;
                margin: 7px 12px 7px 0;
            }

            > .wx-plus {
                box-sizing: border-box;
                width: 64px;
                height: 64px;
                border: 1px solid #d8d8d8;
                margin: 7px 12px 7px 0;
                display: block;
                float: left;
                position: relative;

                &:before {
                    position: absolute;
                    left: 30px;
                    top: 15px;
                    width: 2px;
                    height: 32px;
                    background: #d8d8d8;
                    content: "";
                }

                &:after {
                    position: absolute;
                    top: 30px;
                    left: 15px;
                    width: 32px;
                    height: 2px;
                    background: #d8d8d8;
                    content: "";
                }
            }
        }
    }

    > .wx-button {
        font-size: 18px;
        display: block;
        border: 0;
        margin: 20px 0;
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        text-decoration: none;
        border-radius: 2px;
        outline: none;
        color: #353535;
        background-color: $color-white;
        &[disabled] {
            color: rgba(53, 53, 53, 0.5);
        }
        &:active {
            background-color: #f5f5f5;
        }

        &.wx-primary {
            color: $color-white;
            background-color: #45c01a;
            &[disabled] {
                color: rgba(255, 255, 255, 0.5);
            }
            &:not([disabled]):active {
                background-color: #298409;
            }
        }

        &.wx-danger {
            color: $color-white;
            background-color: #ff5454;
            &[disabled] {
                color: rgba(255, 255, 255, 0.5);
            }
            &:not([disabled]):active {
                background-color: #d24242;
            }
        }
    }
}
